<template>
    <div class="component-telescopic-view">
        <div class="label-view">
            {{label}}
            <span v-if="!disablePull" @click="show = !show" class="right-text">
                展开
                <img :class="{'top': show}" src="../assets/Chevron-bottom.png">
            </span>
        </div>
        <template v-if="show">
            <slot/>
        </template>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-telescopic-view{
        .label-view{
            padding: .9rem 1.5rem;
            color: @color-text-gray;
            .right-text{
                float: right;
                img{
                    transition: transform .3s;
                }
                .top{
                    transform-origin: 50% 50%;
                    transform: rotate(180deg);
                }
            }
        }
    }
</style>

<script>
    export default {
        data(){
            return {show: !this.hide}
        },
        props: ['label', 'hide', 'disablePull']
    }
</script>